<script setup lang="ts">
import organizationManageFn from '@/hooks/fun/organizationManage'
const { leftCard, handleSizeChange, handleCurrentChange, pageObj, total, peopleList, loading, text, disabled, qiehuan, dianCity2, dianCity1, city2List, city3List, city1List, typeList, item, getTree, treeData, defaultProps, getNode, handleNodeClick } = organizationManageFn()
getTree()
</script>
<template>
  <div class="aa" v-loading.fullscreen.lock="loading">
    <leftCard :treeData="treeData" :defaultProps="defaultProps" @handleNodeClick="handleNodeClick as any"></leftCard>
    <div class="right">
      <el-card class="right-top" :shadow="false">
        <div class="title">
          <span>机构信息</span>
        </div>
        <div class="body">
          <el-form :model="item">
            <!-- 第一行 -->
            <el-row style="padding-left: 45px;">
              <el-col :span="7">
                <el-form-item label="机构编号">
                  <el-input :disabled="disabled" style="width: 73%;" v-model="item.id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" style="margin-left: 32px;">
                <el-form-item label="机构名称">
                  <el-input :disabled="disabled" style="width: 78%;" v-model="item.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" style="margin-left: 58px;">
                <el-form-item label="机构类型">
                  <el-select :disabled="disabled" style="width: 78%;margin-right: 32px;" v-model="item.type">
                    <el-option v-for="i in   typeList" :key="i.type" :label="i.name" :value="i.type"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="23" style="padding-left: 45px;">
                <el-form-item label="机构地址">
                  <el-select :disabled="disabled" @change="dianCity1" placeholder="请选择省份"
                    style="width: 29%;margin-right: 32px;" v-model="item.city1">
                    <el-option v-for="i in   city1List" :key="i.id" :label="i.name" :value="i.id"></el-option>
                  </el-select>
                  <el-select :disabled="disabled" @change="dianCity2" placeholder="请选择市"
                    style="width: 29%;margin-right: 32px;" v-model="item.city2">
                    <el-option v-for="i in   city2List" :key="i.id" :label="i.name" :value="i.id"></el-option>
                  </el-select>
                  <el-select :disabled="disabled" style="width: 29%;margin-right: 32px;" placeholder="请选择区"
                    v-model="item.city3">
                    <el-option v-for="i in   city3List" :key="i.id" :label="i.name" :value="i.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row justify="space-evenly">
              <el-col :span="7">
                <el-form-item label="详细地址">
                  <el-input :disabled="disabled" style="width: 70%;" v-model="item.address"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="经度">
                  <el-input :disabled="disabled" style="width: 70%;" v-model="item.longitude">
                    <template #suffix>
                      E
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="维度">
                  <el-input :disabled="disabled" style="width: 70%;" v-model="item.latitude">
                    <template #suffix>
                      N
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第四行 -->
            <el-row>
              <el-col :span="7" style="margin-left: 32px;">
                <el-form-item label="机构负责人">
                  <el-input :disabled="disabled" style="width: 72%;" v-model="item.managerName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" style="margin-left: 31px;">
                <el-form-item label="机构电话">
                  <el-input :disabled="disabled" style="width: 75%;" v-model="item.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="center" style="margin-bottom: 10px;">
              <el-col :span="4">
                <el-button color="#e15536" :disabled="!item.id" @click="qiehuan">{{ text }}</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <!-- 员工信息 -->
      <el-card class="right-bottom" :shadow="false">
        <div class="title">
          <span>员工信息</span>
        </div>
        <div class="body">
          <el-table :data="peopleList?.items" border
            style="max-height:300px;margin: 20px 20px;width: 1360px;min-width: 850px;" empty-text="请选择机构名称">
            <el-table-column label="序号" align="center" type="index"></el-table-column>
            <el-table-column label="员工编号" align="center" property="userId"></el-table-column>
            <el-table-column label="员工姓名" align="center" property="name"></el-table-column>
            <el-table-column label="手机号" align="center" property="mobile"></el-table-column>
            <el-table-column label="所属机构" align="center" property="agency.name"></el-table-column>
            <el-table-column label="系统账户" align="center" property="account"></el-table-column>
            <el-table-column label="系统角色" align="center" property="roleNames"></el-table-column>
            <el-table-column label="账号状态" align="center" property="status">
              <template #default="{ row }">
                <span class="ava" :style="{ 'background-color': row.status == 1 ? '#1dc779' : '#ec7886' }"></span>
                <span class="tableStatus">{{ row.status == 0 ? '禁用' : '正常' }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: end;padding-right: 20px;">
            <el-pagination :current-page="pageObj.page" :page-size="pageObj.pageSize" :page-sizes="[5, 10, 15]"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<style scoped lang="scss">
.ava {
  width: 6px;
  height: 6px;
  // background: #1dc779;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 6px;
}

.aa {
  display: flex;
  // justify-content: space-between;
}

.el-card {
  border: none;
}


.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1400px;
  min-width: 1000px;
  min-height: 808px;
  // background-color: #f1f1f1;
  margin-left: 10px;

  ::v-deep div {
    .el-card__body {
      padding: 0 !important;
    }
  }

  .right-bottom {
    margin-top: 20px;
    height: 443px;
  }

  .right-top,
  .right-bottom {
    width: 100%;
    // height: calc(50% - 20px);

    .title {
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ebeef5;

      span {
        display: block;
        width: 100%;
        height: 60px;
        background-color: #fafafa;
        font-size: 16px;
        font-weight: bold;
        padding-left: 30px;
      }
    }

    .body {
      margin-top: 20px;
    }
  }
}

.custom {
  width: 15px;
  display: flex;
  align-items: center;
  // margin-right: 10px;
}

::v-deep .el-tree {
  .el-tree-node__expand-icon {
    display: none;
  }

  .bold {
    font-weight: bold;
  }

  .orange {
    color: #f1a428;
  }
}
</style>